/*main.css*/
* {
	padding: 0; 
	margin: 0;
	font-family: "Source Code Pro",consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace;
}
body {
	overflow-x: hidden;
}
@font-face {
	font-family: Ailerons;
	src: url('Ailerons.ttf');
}
.nav {
	z-index: 989;
	width: 100%;
	height: 30px;
	padding-bottom: 2px;
	position: fixed;
	top: 0;
	background-color: rgb(220,230,243);
	color: #7678b5; 
	font-size: 16px;
	cursor: pointer;
	overflow-y: hidden;
	-webkit-transition: all 1s;
}

.nav-memu-open {
	height: 420px;
	font-size: 24px;
	-webkit-transition: all 1s;
}

.nav .memu {
	position: absolute;
	top: 4px;
	left: 12px;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.memu-btn-touch {
	height: 30px;
	opacity: 0.4;
	-webkit-transform-origin: 20px 100px;
	-webkit-transform: rotate(-10deg);
	-webkit-transition: all .3s;
	transition: all .3s;
}
.nav h3{
	margin-bottom: 8px;
}
.nav-a {
	color: #222;
	display: block;
	text-decoration: none;
}
.nav-a:before {
	content: "  > "
}

.nav:active {
	color: black;
	text-shadow: 0px 10px 0px #fff;
}

.nav:after{
	content: "**** Σ(°Д°; ****";
	text-align: center;
	font-size: 32px;
	display: block;
	width: 100%;
	/*position: absolute;*/
	text-align: center;
	bottom: 16px;
}

hr {
	margin: 5px 0 5px 0;
	border-style: dotted;
	border-color: #BBB;
}

.area-display {
	position: relative;
	widows: 100%;
	margin: 50px 0 50px 0; 
	overflow-x: hidden;
}

.bottom-about {
	position: relative;
	text-align: center;
	width: 100%;
	height: 100%;  
	color: white;
	z-index: 998;
}
.bottom-about img {
	position: absolute;
	z-index: -10;
	width: 100%; 
	display: block;

}

.bottom-about a {
	color: white;
}

.bottom-about > .msg {
	position: absolute;
	width: 100%; 
	bottom: 4px; 
}

.msg span{
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-width: 6px;
	overflow: hidden;
	border-color: transparent transparent transparent #FFF;
	border-style: dotted dotted dotted solid;
	border-radius: 2px;

}
.msg p {
	display: inline;
}
.msg p:after {
	content: "";display: block;
}
